<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         *  操作对象属性和方法的操作方式：
         *  1. .语法
         *  2. []语法
         *  
         *  . 语法和 [] 语法的区别, [] 语法可以用变量
         */

        // 定义的时候：
        var obj = {
            name:'atguigu',
            age:10,
            eat:function(){
                console.log('要开饭了')
            }
        }
        console.log(obj.name,obj.age); // . 语法操作属性
        obj.eat(); // . 语法调用方法

        // 【】语法
        console.log(obj['name'], obj['age']);
        obj['eat']();

        // 【】语法可以用变量
        var str = 'age';
        var obj2 = {
            age:19,
            sex:'girl'
        }
        console.log(obj2.str);
        // . 语法不能用变量
        // 读取对象中不存在的属性，值是undefined

        console.log(obj2['str']);// 读取obj2的str属性
        console.log(obj2[str]); // str当做变量处理，所以是读取obj2的age属性

        var str = 'age';
        var obj = {
            [str]: 19,
            ['name']:'atguigu'
        }
        console.log(obj);

        // 属性名如果不符合标识符规范，需要加引号
        var obj2 = {
            'user-name':'尚硅谷',
            'user-age':19
        }
        console.log(obj2);
        console.log(obj2['user-name']);

        // 属性名可以不加引号，也可以用但引号，或者是双引号
        var obj3 = {
            'name':'atguigu',
            'age':19
        }
        console.log(obj3);

        var obj4 = {
            "name":"atguigu",
            "age":20
        }
        console.log(obj4);

        /**
         *  属性操作：
         *  1. 创建：
         *     1-1. 在定义对象字面量的时候，直接创建
         *     1-2. 先创建对象，在添加属性
         * 
         */

        var obj5 = {};
        console.log(obj5);
        // 添加属性
        obj5.name = 'atguigu';
        obj5['age'] = 20;
        obj5['user-info'] = '宏福科技园';
        // 属性读取
        console.log(obj5['name'], obj5.age);
        // 修改属性值
        obj5['age'] = 21;
        obj5['name'] = '尚硅谷';
        console.log(obj5);

        // 删除属性
        delete obj5['age'];
        delete obj5.name;
        console.log(obj5);

        // 属性名重复,后面的值会覆盖前面的值
        var obj6 = {
            name:'atguigu',
            age:20,
            address:'宏福科技园',
            name:'尚硅谷'
        }
        console.log(obj6);
        
        // 复制一个对象中所有的属性值
        var obj7 = {
            ...obj6
        }
        console.log(obj7, obj6 === obj7);
    </script>
</body>
</html>